<template>
	<up-popup :show="sendShow" :safe-area-inset-bottom="false" bgColor="transparent" @close="sendShow=false" >
		<view class="send-alert" :style="`background: url(${$imgurl}/static/send-bg.jpg) no-repeat; background-size:100% 640rpx;`">
			<view class="title-box">
				<image :src="`${$imgurl}/static/send-title.png`" mode="heightFix"></image>
				<view class="span">
					请选择送别人的礼物形式
				</view>
			</view>
			<image :src="`${$imgurl}/static/icon-close2.png`" class="close" mode="" @click="sendShow=false"></image>
			<view class="item-box">
				<view class="item" :style="`background: url(${$imgurl}/static/send-item-bg.png) no-repeat;background-size: cover;`">
					<image :src="`${$imgurl}/static/send-1.png`" mode=""></image>
					<view class="text">
						<view class="left">
							<view class="h1">
								配置题目
							</view>
							<view class="msg">
								谜题破解，趣味送礼玩法
							</view>
						</view>
						<navigator :url="`/pages/gift/send?id=`+id"  @click="sendShow=false" class="btn">
							去发起
						</navigator>
					</view>
				</view>
				<view class="item" :style="`background: url(${$imgurl}/static/send-item-bg.png) no-repeat;background-size: cover;`">
					<image :src="`${$imgurl}/static/send-2.png`" mode=""></image>
					<view class="text">
						<view class="left">
							<view class="h1">
								发起抽奖
							</view>
							<view class="msg">
								盲盒抽奖，人人都有机会
							</view>
						</view>
						<navigator :url="`/pages/lottery/send?id=`+id" @click="sendShow=false" class="btn">
							去发起
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {ref,computed,watch} from "vue"
	let props = defineProps({
			id:'',
		});
	const num=ref(1)
	
	const sendShow=ref(false)
	const show=()=>{
		sendShow.value=true
	}
	const hide=()=>{
		sendShow.value=false
	}
	const emits = defineEmits();
	
	defineExpose({ show, hide,sendShow});
</script>

<style lang="scss">
	.send-alert{
		// position: relative;
		padding:0 56rpx;
		border-radius: 58rpx 58rpx 0 0;
		padding-bottom: 68rpx;
		height:640rpx;
		box-sizing: border-box;
		.title-box{
			padding-top:42rpx;
			padding-left: 182rpx;
			image{
				height:44rpx;display: block;
			}
			.span{
				font-weight: bold;line-height: 1;
				margin-top: 16rpx;
				color:#FCBFAF;
				font-size: 28rpx;
			}
		}
		.close{
			position: absolute;
			top:36rpx;
			right:40rpx;
			width:32rpx;height:32rpx;
		}
		.item-box{
			padding-top:42rpx;
			.item{
				display: flex;align-items: center;
				padding:38rpx 32rpx;
				border-radius: 30rpx;
				margin-top:20rpx;
				&:nth-child(1){
					margin-top: 0;
				}
				image{
					width:104rpx;margin-right:32rpx;
					height:104rpx;
				}
				
				.text{
					flex:1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						flex:1;line-height: 1;
						.h1{
							font-size:36rpx;
							font-weight: bold;
						}
						.msg{
							font-size: 24rpx;
							margin-top: 12rpx;
							color:#8C1F42;
						}
					}
					.btn{
						line-height: 64rpx;
						background: linear-gradient( 90deg, #FF714D 0%, #FF4E33 100%);
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						text-align: center;font-weight: bold;
						font-size:28rpx;
						padding:0 38rpx;
						color:#fff;
					}
				}
			}
		}
		
	}
</style>